<template>
  <el-dialog
    :title="pro + '权限'"
    :visible.sync="dialogVisible"
    class="i-dialog"
    width="35%">
    <span>
      <ul>
        <li>
          <span>账号:</span>
          <el-input @input="inputAccount" class="add-permission" :value="account" placeholder="账号"/>
        </li>
        <li style="margin-top: 10px">
          <span>名称:</span>
          <el-input @input="inputName" class="add-permission" :value="name" placeholder="名称"/>
        </li>
        <div style="display: flex;width: 100%;margin-top: 10px">
          <span style="margin-right: 13.5%">权限:</span>
         <span style="flex: 1">
            <table cellspacing="0" width="100%" height="100"class="bd">
            <tr  style="text-align: center;" >
              <td class="i-width bd-b bd-r">页面</td>
            </tr>
            <tr style="width: 100%;" v-for="item in permissionList" :key="item.id">
               <input  type="checkbox"
                       name="enterpriseList"
                       :value="item.id"
                       v-model="checkId"
                       style="margin-right: 10px">{{item.name}}
            </tr>
          </table>
           注：密码初始统一为：123456
         </span>
        </div>
      </ul>
    </span>
    <span slot="footer" class="dialog-footer" style="display: flex;align-items: center;justify-content: center">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="sendData">确 定</el-button>
  </span>
  </el-dialog>
</template>

<script>
/*eslint-disable*/
import {selectMenuAll} from "../../utils/authority";
  export default {
    name: "AditPermission",
    data() {
      return {
        dialogVisible: false,
        pro:"新建",
        permissionList:[],
        checkId:[],
        account:"",
        name:"",
      };
    },
    created(){
      selectMenuAll("/selectMenuAll")
        .then(rawRes=>rawRes.data).then(res=>{
          let data2=[];
          res.filter(item=>{
            let data={};
            data.id=item.id;
            data.name=item.menuName;
            data2.push(data);
          });
          this.permissionList=data2
      });
    },
    methods: {
      show(param) {
        this.pro=param;
        this.dialogVisible=true;
      },
      inputAccount(val){
        this.account=val
      },
      inputName(val) {
        this.name=val;
      },
      sendData(){
        this.dialogVisible = false;
        let data={};
        data.menuList=this.checkId || [1];
        data.roleName=this.name;
        data.roleCode=this.account;
        this.$emit("addCompetence",data)
      },
    },
  }
</script>

<style scoped>
  ul{
    padding: 0;
  }
  li{
    list-style:none;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .add-permission{
    width: 80%;
  }
  .i-dialog>>>.el-dialog__body{
    padding: 5px 20px;
  }
  .bd{
    border: 1px solid #ccced2;
  }
  .bd-b{
    border-bottom:1px solid #ccced2
  }
  .bd-r{
    border-right:1px solid #ccced2
  }
  .bd-l{
    border-left:1px solid #ccced2
  }
  .bd-t{
    border-top:1px solid #ccced2
  }
  .i-width{
    width: 90px;
  }
</style>
